<template>
    <div class="home">
        <div class="header">
            <div class="header-left">
                <img src="@/assets/images/model.png" />
                <div>仿真实训系统</div>
            </div>
            <div class="header-right">
                <div class="avatar-container">
                    <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
                        <div class="avatar-wrapper">
                            <img :src="userStore.avatar" class="user-avatar" />
                            <el-icon><caret-bottom /></el-icon>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <!-- <router-link to="/user/profile">
                                    <el-dropdown-item>个人中心</el-dropdown-item>
                                </router-link> -->

                                <el-dropdown-item divided command="logout">
                                    <span>退出登录</span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <div class="query">
            <el-form :model="queryParams" style="width: 100%;display: flex;padding: 0 20px 0 50px;
        justify-content: space-between;" ref="queryRef" :inline="true" label-width="68px" @submit.prevent="handleQuery">
                <el-form-item prop="modelName">
                    <el-input class="input" @clear="getList" v-model="queryParams.modelName" placeholder="搜索项目文件名称" clearable @keyup.enter.native="handleQuery">
                        <template #prefix>
                            <el-icon class="el-input__icon" style="transform: scale(2);margin-left: 20px;">
                                <search />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="add" type="primary" icon="plus" @click="handleAdd">仿真实训项目</el-button>
                </el-form-item>
            </el-form>

        </div>
        <div class="list" v-loading="loading">
            <div class="list-item" v-for="item in list" :key="item" @click="handleDesgin(item)">
                <div class="list-item-img">
                    <img  v-if="item.modelUrl" :src="item.modelUrl" />
                    <img v-else src="@/assets/images/home-list-cover.svg" />
                </div>
                <div class="list-item-name"> {{ item.modelName }}</div>
                <div class="list-item-time"> {{ getTime(item.updateTime)}}</div>
                <img class="del" src="@/assets/images/close.png" @click.stop="del(item)" />
                <!-- <div class="detail" @click.stop="detail(item)">详情</div> -->
                <img class="view" src="@/assets/images/view.png" @click.stop="detail(item)"/>
            </div>
        </div>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    
    </div>
</template>
<script setup name="Home">
import { getModelByPage, delModelById } from '@/api/simulation/design';
import { ElMessageBox } from 'element-plus';
import useUserStore from '@/store/modules/user';
import { ref } from 'vue'
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const router = useRouter();
const queryParams = ref({
    pageNum: 1,
    pageSize: 8,

});
const loading = ref(false);
const list = ref([]);
const total = ref(0);
/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;    
    getList();
}

/**
 * 获取列表
 */
async function getList() {
    try {
        loading.value = true;
        const res = await getModelByPage(queryParams.value);
        total.value = res.data.total;
        res.data.list.forEach(item => {
            if(item.modelUrl){
                item.modelUrl = import.meta.env.VITE_APP_BASE_API+ item.modelUrl;
            }
        }
        )
        list.value = res.data.list;
    } catch (e) {
        console.error(e)
    } finally {
        loading.value = false;
    }

}

//设计
function handleDesgin(item) {
    router.push({ path: '/design', query: { id: item.id ,type:0} });
}

//详情
function detail(item) {
    router.push({ path: '/design', query: { id: item.id ,type:1} });
    // router.push({ path: '/detail', query: { id: item.id } });
}

//更新时间
function getTime(Time) {
    const targetDate = new Date(Time);
    // 当前时间
    const now = new Date();
    let remaining = now - targetDate;
    if(remaining <=1000 *60){
        //更新时间一分钟以内
        return "更新于 刚刚"
    }else if(remaining <= 1000 * 60 * 30){
        let minutes = Math.floor(remaining / (1000 * 60 ));
        return "更新于 " + minutes + "分钟前"
    }else {
         return "更新于 " + Time.replace(/(:\d{2})$/, '')
    }
}

//退出登录
function handleCommand(command) {
    switch (command) {
        case "logout":
            logout();
            break;
        default:
            break;
    }
}

/**
 * 退出登录
 */
function logout() {
    ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        userStore.logOut().then(() => {
            location.href = '/index';
        })
    }).catch(() => { });
}


function handleAdd() {
    router.push({ path: '/design' ,query: { type:0}})
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

function del(item) {
    proxy.$modal.confirm('是否确认删除此条数据项？').then(function () {
        return delModelById({ id: item.id });
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });

}
getList();
</script>
<style lang="scss" scoped>
.home {
    height: 100vh;
    width: 100%;
    background-image: url("../../../assets/images/home-bg.png");
    background-size: 100% 100%;
    position: relative;
    background-repeat: no-repeat;
    overflow-y:auto ;

    :deep(.el-pagination__total) {
        color: #fff;
    }
    :deep(.el-select__wrapper) {
        background: transparent;
    }
    :deep(.pagination-container){
        background: transparent !important;
    }
    :deep(.el-pagination) {
        // position: absolute;
        // bottom: 0px;
        background: transparent !important;
        padding-right: 50px;
        .btn-prev,
        .number,
        .btn-next {
            background: transparent !important;
        }
    }
    :deep(.el-pagination__goto) {
        color: #fff;
    }
    :deep(.el-pagination__jump) {
        color: #fff;
        background: transparent !important;
    }
    :deep(.el-pagination .el-input__wrapper) {
        background: transparent !important;
    }

    .list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 50px;
        gap: 2.6%;
        position: relative;
      
  
        &-item {
            position: relative;
            width: 23%;
            height: 310px;
            border-radius: 8px;
            background: #0f2b66;
            margin-bottom: 24px;
            overflow: hidden;
            .view{
                display: none;
                cursor: pointer;
                color: #fff;
                position: absolute;
                bottom: 26px;
                right: 10px;
                z-index: 1;
                height: 30px;
                width:30px;
            }
            .detail{
                cursor: pointer;
                color: #fff;
                position: absolute;
                bottom: 30px;
                right: 10px;
                z-index: 1;
            }
            .del {
                display: none;
                width: 30px;
                height: 30px;
                position: absolute;
                right: 6px;
                top: 6px;
            }
            &:hover {
                opacity: 0.8;
                border: 0.4px solid #75a0c4;
                .del {
                    cursor: pointer;
                    display: block;
                    width: 30px;
                    height: 30px;
                    position: absolute;
                    right: 6px;
                    top: 6px;
                }
                .view{
                    display: block;
                }
            }
            &-name {
                width: 260px;
                height: 28px;
                overflow: hidden;
                margin-top: 10px;
                margin-left: 10px;
                color: #ffffff;
                font-size: 20px;
            }
            &-time {
                margin-left: 10px;
                margin-top: 10px;
                font-size: 16px;
                line-height: 16px;
                color: #bebebe;
            }

            &-img {
                overflow: hidden;
                width: 100%;
                height: 234px;
                border-radius: 8px;
                background: #001235;
                box-sizing: border-box;
                // border: 0.4px solid #75a0c4;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 10px;
                 img {
                    border-radius: 8px;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }
            }
        }
    }
    .query {
        width: 100%;
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
        .input {
            // transform: scale(2);
            :deep(.el-input__inner) {
                background: transparent !important;
                color: #fff;
                font-size: 14px;
                width: 596px;
                height: 44px;
                /* 自动布局 */
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 16px 370px 16px 14px;
            }
            :deep(.el-input__wrapper) {
                background: transparent !important;
            }
        }
        .add {
            width: 220px;
            height: 48px;
            border-radius: 8px;
            background: #3670f7;
            font-size: 20px;
        }
    }
    .header {
        width: 100%;
        padding: 10px 50px 0px 50px;
        display: flex;
        justify-content: space-between;
        &-right {
            .right-menu-item {
                display: inline-block;
                padding: 0 8px;
                height: 100%;
                font-size: 18px;
                color: var(--navbar-text);
                vertical-align: text-bottom;

                &.hover-effect {
                    cursor: pointer;
                    transition: background 0.3s;

                    &:hover {
                        background: rgba(0, 0, 0, 0.025);
                    }
                }

                &.theme-switch-wrapper {
                    display: flex;
                    align-items: center;

                    svg {
                        transition: transform 0.3s;

                        &:hover {
                            transform: scale(1.15);
                        }
                    }
                }
            }
            .avatar-container {
                .avatar-wrapper {
                    margin-top: 10px;
                    position: relative;

                    .user-avatar {
                        cursor: pointer;
                        width: 40px;
                        height: 40px;
                        border-radius: 10px;
                    }

                    i {
                        cursor: pointer;
                        position: absolute;
                        right: -20px;
                        top: 25px;
                        font-size: 12px;
                    }
                }
            }
        }
        &-left {
            height: 60px;
            width: 100%;

            align-items: center;
            display: flex;
            img {
                width: 50px;
                height: 50px;
            }
            div {
                font-family: YouSheBiaoTiHei;
                font-size: 44px;
                font-weight: bold;
                line-height: 54px;
                display: flex;
                align-items: center;
                letter-spacing: normal;
                background: linear-gradient(
                    180deg,
                    #eff8ff 0%,
                    #cfe7fa 50%,
                    #67baff 100%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;
            }
        }
    }
}
</style>